
<template>
  <div>
    <ul v-if="flag">
      <li v-for="item in renderList" :key="item.id" @click="fn('detail',item.id)">
        <h4 >{{ item.uname }} --组件的ID为 {{item.id}}</h4>
      </li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
export default {
  components: {},
  data() {
    return {
      flag:true,
      renderList: [
        {
          id: 1,
          uname: '哈哈'
        },
        {
          id: 2,
          uname: '嘻嘻'
        },
        {
          id: 3,
          uname: '嘿嘿'
        },
        {
          id: 4,
          uname: '呵呵'
        },
        {
          id: 5,
          uname: '桀桀'
        }
      ]
    }
  },
  methods:{
    fn(name,id){
      this.flag = false
      this.$router.push({
        name,
        query:{
          id
        }
      },()=>{})
    },
  },
}
</script>

<style scoped>
li {
  list-style: none;
  margin-bottom: 20px;
  padding-left: 20px;
  border: 2px solid #333;
}
</style>



